﻿@model ProductDetailsModel
@using Nop.Core.Domain.Media
@using Nop.Core.Infrastructure
@using Nop.Web.Models.Catalog;
@{
    Html.AddScriptParts("~/Scripts/slimbox2.js");

    int productPerRow = EngineContext.Current.Resolve<MediaSettings>().ProductThumbPerRowOnProductDetailsPage;
}
<div class="gallery">
    <div class="picture">
        @if (Model.DefaultPictureZoomEnabled)
        {
            <a href="@Model.DefaultPictureModel.FullSizeImageUrl" data-gallery="lightbox-pd" title="@Model.Name"  id="main-product-img-lightbox-anchor-@Model.Id">
                <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
            </a>
        }
        else
        {
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" itemprop="image" id="main-product-img-@Model.Id" />
        }
    </div>
    @if (Model.PictureModels.Count > 1)
    {
        <div class="picture-thumbs">
            @foreach (var picture in Model.PictureModels)
            {
                <a href="@picture.FullSizeImageUrl" data-gallery="lightbox-p" title="@Model.Name">
                    <img src="@picture.ImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
                </a>
            }
        </div> <!--picturethumbs-->
    }
</div>
<!--picture-->
